// 左侧头像框  方形
<template>
  <div class="container">
    <div class="touxiang">
      <img :src="this.$store.state.HeadPortrait">
    </div>
    <h4>{{ this.$store.state.UserName }}</h4>
    <p>会员等级：普通会员</p>
  </div>
</template>
<script>
export default {
  name: "headFrame"
}
</script>
<style lang="scss" scoped>
.container {
  width: 190px;
  height: 156px;
  background: #fff;
  margin-bottom: 10px;
  padding-top: 34px;
  h4 {
    margin-top: 18px;
    text-align: center;
    line-height: 28px;
  }
  p {
    text-align: center;
    line-height: 22px;
    color: #747474;
  }
  .touxiang {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border:1px solid rgba(240, 240, 240, 0.774);
    overflow: hidden;
    margin: auto;
    img {
      width: 75px;
    }
  }
}
</style>
